<template lang="html">
  <div class="home-module">
    <img src="/static/images/home/icon_four.png" alt="">
    <div class="wrap">
      <router-link class="pro" :to="{ name: 'proDetail', query: {proId: p.id} }" v-for="(p,index) in proList" :key="index">
        <img v-lazy="'http://wlsqbucket.img-cn-shenzhen.aliyuncs.com/'+p.pic" />
        <b class="pro-name">{{p.name}}</b>
        <i class="pro-price">￥{{p.cash}}</i>
      </router-link>
      <router-link :to="{ name: 'proList', params: {} }" class="more">
        <span>查看更多</span>
      </router-link>
    </div>
  </div>
</template>
<script>
export default {
  props: ['proList']
}
</script>

<style lang="scss">
@import '../../assets/styles/common.scss';
.home-module {
    img {
        width: 100%;
        background-size: cover;
    }
    .wrap {
        color: #d1c62d;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        padding: px2rem(10px) 0;
        height: px2rem(550px);
        background-color: #fff;
        .more {
            width: 33.3333%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            padding: px2rem(10px);
            span {
                display: block;
                width: 100%;
                text-align: center;
                height: px2rem(150px);
                line-height: px2rem(150px);
                background-color: #f2f2f2;
            }
        }
        .pro {
            width: 33.3333%;
            padding: px2rem(10px);
            box-sizing: border-box;
            > img {
                width: 100%;
                height: px2rem(150px);
                margin: 0 auto;
                display: block;
                // border-radius: px2rem(8px);
            }
            &-name {
                display: block;
                height: px2rem(45px);
                overflow: hidden;
                color: black;
                line-height: px2rem(25px);
                margin-top: px2rem(20px);
                @include font-dpr(12px);
                font-weight: bold;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            &-price {
                color: red;
                display: block;
                height: px2rem(45px);
                line-height: px2rem(45px);
                @include font-dpr(12px);
            }
        }
    }
}
</style>
